<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='AI图片管理',active=''">
<head th:replace="/header::headerFragment(title,active)"></head>
<body>
<div th:replace="/header::header-body"></div>
<div class="container-fluid bg-info">
  <div class="row">

    <div th:replace="/leftnav::leftnav"></div>

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <div class="row" style="padding: 20px 0 0 40px">

        <div class="col-lg-6">
          <form action="find_images_with_user" method="get">
            <div class="input-group">
              <input type="text" class="form-control" name="find_images" id="find_images" placeholder="搜索图片...">
              <span class="input-group-btn">
               <button class="btn btn-default" type="submit">搜索!</button>
            </span>
            </div><!-- /input-group -->

          </form>

        </div><!-- /.col-lg-6 -->
      </div>







      <form id="edit_image_form" class="was-validated" enctype="multipart/form-data" method="post">
        <!-- 修改分类模态框 -->
        <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">

              <!-- 模态框头部 -->
              <div class="modal-header">
                <h4 class="modal-title">修改图片信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div>

              <!-- 模态框内容 -->
              <div class="modal-body">
                <input type="hidden" class="form-control" id="img_path" name="img_path">
                <div class="mb-3 mt-3">
                  <label for="author" class="form-label">图片作者</label>
                  <input type="text" class="form-control" id="author" placeholder="图片作者" name="author">
                </div>
                <div class="mb-3 mt-3">
                  <label for="like" class="form-label">获赞数</label>
                  <input type="text" class="form-control" id="like" placeholder="获赞数" name="like">
                </div>
                <div class="mb-3 mt-3">
                  <label for="prompt" class="form-label">正向标签</label>
                  <input type="text" class="form-control" id="prompt" placeholder="正向标签" name="prompt">
                </div>
                <div class="mb-3 mt-3">
                  <label for="width" class="form-label">图片宽度</label>
                  <input type="text" class="form-control" id="width" placeholder="图片宽度" name="width">
                </div>
                <div class="mb-3 mt-3">
                  <label for="height" class="form-label">图片高度</label>
                  <input type="text" class="form-control" id="height" placeholder="图片高度" name="height">
                </div>
                <div class="mb-3 mt-3">
                  <label for="steps" class="form-label">步数</label>
                  <input type="text" class="form-control" id="steps" placeholder="步数" name="steps">
                </div>
                <div class="mb-3 mt-3">
                  <label for="scale" class="form-label">迭代循环</label>
                  <input type="text" class="form-control" id="scale" placeholder="迭代循环" name="scale">
                </div>
                <div class="mb-3 mt-3">
                  <label for="sampler" class="form-label">生成算法</label>
                  <input type="text" class="form-control" id="sampler" placeholder="生成算法" name="sampler">
                </div>
                <div class="mb-3 mt-3">
                  <label for="seed" class="form-label">种子</label>
                  <input type="text" class="form-control" id="seed" placeholder="种子" name="seed">
                </div>
                <div class="mb-3 mt-3">
                  <label for="strength" class="form-label">强度</label>
                  <input type="text" class="form-control" id="strength" placeholder="强度" name="strength">
                </div>
                <div class="mb-3 mt-3">
                  <label for="noise" class="form-label">噪音</label>
                  <input type="text" class="form-control" id="noise" placeholder="噪音" name="noise">
                </div>
                <div class="mb-3 mt-3">
                  <label for="uc" class="form-label">反向标签</label>
                  <input type="text" class="form-control" id="uc" placeholder="反向标签" name="uc">
                </div>

              </div>
              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="updateImage108()">提交</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
              </div>

            </div>
          </div>
        </div>
      </form>



      <script th:inline="javascript">
        // 通过id获取修改的商品信息
        function getImageInfo108(img_path,author,like,prompt,width,height,steps,scale,sampler,seed,strength,noise,uc) {
          $("#img_path").val(img_path);
          $("#author").val(author);
          $("#like").val(like);
          $("#prompt").val(prompt);
          $("#width").val(width);
          $("#height").val(height);
          $("#steps").val(steps);
          $("#scale").val(scale);
          $("#sampler").val(sampler);
          $("#seed").val(seed);
          $("#strength").val(strength);
          $("#noise").val(noise);
          $("#uc").val(uc);
        }

        // 修改商品分类
        function updateImage108() {
          $.ajax({
            url: "updateImage108",
            type: "POST",//方法类型
            cache: false,
            processData: false,
            contentType: false,
            dataType: "json",
            data: new FormData($('#edit_image_form')[0]),
            success: function (data) {
              // alert(data);
              if (data.result == "success") {
                alert(data.msg);
                window.location.reload();
              } else {
                alert(data.msg);
              }
            }, error: function (xhr, status, error) {
              alert("请求失败!" + status);
            }
          });
        }

      </script>

      <!--//面板-->
      <div class="panel panel-default" style="padding: 20px 0 0 40px">
        <!-- Default panel contents -->
        <div class="panel-heading"><h3>用户列表</h3></div>
        <!-- Table -->
        <table class="table table-bordered table-striped table-hover" style="table-layout: fixed">
          <thead>
          <tr>
            <td>图片</td>
            <td>正向标签</td>
            <td>作者</td>
            <td>获赞数</td>
            <td>宽度</td>
            <td>高度</td>
            <td>操作</td>
          </tr>
          </thead>
          <tbody>
          <!--        each循环-->
          <tr th:id="${image.img_path}" th:each="image : ${Imageslist.list}">

            <td><img th:src="@{'/images/'+${image.img_path}}" width="50" height="50"></td>
<!--            style="width:50px;"-->
            <td style="width:50px;"><th:block th:text="${image.prompt}"></th:block></td>
            <td><th:block th:text="${image.author}"></th:block></td>
            <td><th:block th:text="${image.like}"></th:block></td>
            <td><th:block th:text="${image.width}"></th:block></td></td>
            <td><th:block th:text="${image.height}"></th:block></td></td>
            <td>
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#updateModal"
                      th:data-img_path="${image.img_path}" th:data-author="${image.author}" th:data-like="${image.like}"
                      th:data-prompt="${image.prompt}" th:data-width="${image.width}" th:data-height="${image.height}"
                      th:data-steps="${image.steps}" th:data-scale="${image.scale}" th:data-sampler="${image.sampler}"
                      th:data-seed="${image.seed}" th:data-strength="${image.strength}" th:data-noise="${image.noise}"
                      th:data-uc="${image.uc}"
                      onclick= "getImageInfo108(this.getAttribute('data-img_path'),this.getAttribute('data-author'),this.getAttribute('data-like'),this.getAttribute('data-prompt'),
                        this.getAttribute('data-width'),this.getAttribute('data-height'),this.getAttribute('data-steps'),this.getAttribute('data-scale')
                        ,this.getAttribute('data-sampler'),this.getAttribute('data-seed'),this.getAttribute('data-strength'),this.getAttribute('data-noise')
                        ,this.getAttribute('data-uc'))">
                修改
              </button>
              <a th:href="@{'deleteImage108/'+${image.img_path}}" class="btn btn-danger">删除</a>
<!--              <a th:href="@{'../deleteUser_108/'+${image.img_path}}" class="btn btn-danger">图片详情</a>-->
              <form action="../../ImageDetail" method="get">
                <input type="text" class="form-control" name="img_path" id="img_path2" style="display: none" th:value="${image.img_path}">

                <button class="btn btn-default" type="submit">图片详情</button>

              </form>
            </td>

          </tr>

          </tbody>
        </table>
<!--        给prompt用的，太长会把表格撑开-->
        <style>
          table {
            width:200px;
            border:1px solid green;
          }
          td {
            width:50%;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        </style>
      </div>

<!--      &lt;!&ndash; 文章分页信息 &ndash;&gt;http://127.0.0.1:8080/manage/image/find_images/store-->
      <div class="row">
        <nav th:if="${search}eq'flase'" aria-label="Page navigation" id="no_search">
          <ul class="pagination justify-content-center">
            <li class="page-item" th:if="${Imageslist.hasPreviousPage}" >
              <a class="page-link" th:href="@{'?page='+${Imageslist.prePage}}" >上一页</a>
            </li>
            <li th:class="${nav==Imageslist.pageNum}?'page-item active':'page-item'" th:each="nav : ${Imageslist.navigatepageNums}">
              <a class="page-link" th:href="@{'?page='+${nav}}" th:text="${nav}"></a> </li>

            <li class="page-item" th:if="${Imageslist.hasNextPage}">
              <a class="page-link" th:href="@{'?page='+${Imageslist.nextPage}}">下一页</a>
            </li>

          </ul>
        </nav>
<!--        th:value="${param.find_images}" 可以拿到url里面的参数-->
<!--        先在上层标签使用th:with="code=${param.code}"将param中的值读取为局部变量。-->
<!--        然后再将使用局部变量给自定义attribute赋值th:code="${code}"-->
<!--        结构类似-->
        <nav th:if="${search}eq'true'" aria-label="Page navigation" id="search" th:with="find_images=${param.find_images}">
          <ul class="pagination justify-content-center">
            <li class="page-item" th:if="${Imageslist.hasPreviousPage}">
              <a class="page-link" th:href="@{'?find_images='+${find_images}+'&page='+${Imageslist.prePage}}" >上一页</a>
            </li>
            <li th:class="${nav==Imageslist.pageNum}?'page-item active':'page-item'" th:each="nav : ${Imageslist.navigatepageNums}">
              <a class="page-link" th:href="@{'?find_images='+${find_images}+'&page='+${nav}}" th:text="${nav}"></a> </li>

            <li class="page-item" th:if="${Imageslist.hasNextPage}" >
<!--              <input type="text" id="find_images12" th:value="${param.find_images}">-->
              <a class="page-link" th:href="@{'?find_images='+${find_images}+'&page='+${Imageslist.nextPage}}">下一页</a>
            </li>

          </ul>
        </nav>

      </div>

    </div>

  </div>
</div>



<div th:replace="/footer::footer"></div>
</body>
</html>